<template>
	<view class="card-popup">
		<u-popup :mask-close-able='false' v-model="show" mode='bottom' border-radius="20">
			<view class="card-popup-title ph20">
				<view class="flex-start align-center" style="color: rgba(239, 66, 79, 1);" @click="toAddMember">
					<view class="fontw f36 mr5 add_icon">+</view>
					<view class="f28">兑换码</view>
				</view>
				<view class="f36 flex-center fontw" style="color: rgba(34, 34, 34, 1);">
					电影卡
				</view>
				<view @click="close" class="iconfont iconbaseline-close-px close-sty"
					style="font-size: 44rpx;color: rgba(204, 204, 204, 1);">
				</view>
			</view>
		
			<scroll-view class="card-popup-body" :scroll-y="true">
				<template v-if="array.length > 0">
					<view :class="['item',item.freeze||item.expire||item.deficiency_amount_used?'disabled':'']" 
					v-for="(item,index) in list" :key="item.id" @tap="selectMember(index,item)">
						<view class="top-box">
							<view class="text1">
								<view class="text1-1">
									余额（元）
								</view>
								<view class="text1-2">
									{{item.amount_used}}
								</view>
							</view>
							<view class="text2">
								<view class="text2-1">
									卡号<text>{{item.code}}</text>
								</view>
								<view class="text2-2">
									有效期至<text>{{item.validity_time_end.split(' ')[0]}}</text>
								</view>
							</view>
							<view class="card_select">
								<image v-if="index === select" src="../static/cardPopup_cardSelect.png" mode=""></image>
							</view>
						</view>
						<view class="disabled_cause-box" v-if="item.freeze||item.expire||item.deficiency_amount_used">
							<view class="disabled_cause">
								<image src="../static/cardPopup_disabled_cause_icon.png" mode=""></image>
								<view class="disabled_cause_text">
									该卡不可用：<text>{{item.disabled_cause_text}}</text>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 0;width: 0;opacity: 0;"></view>
				</template>
				<template v-else>
					<view class="no-card flex-center align-end pb40">
						<text class="f24" style="color: rgba(153, 153, 153, 1);">您还没有电影卡哦</text>
					</view>
				</template>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				array: [],
				select: -1,
				backGetData:false,//从添加电影卡返回时获得数据
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			orderPrice: {
				type: Number,
				default: 0,
			}
		},
		watch: {
			value: {
				handler(n, o) {
					this.show = n
				},
				immediate: true
			},
			list: {
				handler(n, o) {
					this.array = n.map((i)=>{
						i.deficiency_amount_used = i.amount_used < this.orderPrice//是否金额不足
						if(i.deficiency_amount_used)i.disabled_cause_text = '余额不足，请更换支付方式'
						i.freeze = i.status == 3//是否冻结
						if(i.freeze)i.disabled_cause_text = '已被冻结'
						i.expire = !this.$common.isBefore(i.validity_time_end)//是否过期
						if(i.expire)i.disabled_cause_text = '已过有效期'
						return i
					})
				},
				immediate: true,
			},
			array(v){
				if(v.length > 0){
					let num = this.getNum(this.array)
					if(num > 0){
						this.$emit('setMemberText',`${num}张可用`)
					}else{
						this.$emit('setMemberText','无可用')
					}
				}else {
					this.$emit('setMemberText',`立刻添加`)
				}
			},
			select(v){
				if(v!==''){
					setTimeout(()=>{
						this.$emit('close')
					},200)
				}
			}
		},
		onShow() {
			if(this.backGetData){
				this.$emit('getMyMember')
				this.backGetData = false
			}
		},
		// onLoad() {
		// 	console.log('onLoad');
		// 	let query = uni.createSelectorQuery().in(this);
		// 	query.select('.card-popup').boundingClientRect((res)=>{
		// 		console.log('--------------------------------',res);
		// 	}).exec()
		// },
		methods: {
			// 点击某个电影卡
			selectMember(index,item){
				if(item.deficiency_amount_used || item.expire || item.freeze){
					return
				}
				if(this.select === index){
					this.select = -1
					this.$emit('selected',{})
					this.$emit('setMemberText',`${this.getNum(this.array)}张可用`)
				}else{
					this.select = Number(index)
					this.$emit('selected',this.array[index])
					this.$emit('setMemberText',`- ${this.orderPrice.toFixed(2).toString()}`)
				}
			},
			close() {
				this.$emit('input', false)
			},
			getNum(arr){
				let num = 0
				arr.forEach((i)=>{
					if(!(i.deficiency_amount_used || i.freeze || i.expire)){
						num++
					}
				})
				return num
			},
			addConfirm() {
				console.log(this.code,this.password);
				if (!this.code || !this.password) {
					// this.exchangeShow = false
					if(this.code){
						uni.showToast({
							title: '请输入电影卡卡号',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: '请输入卡背面的6位数密码',
							icon: 'none'
						})
					}
				} else {
					this.bindMember()
				}
			},
			toAddMember(){
				this.backGetData = true
				uni.navigateTo({
					url:'/subpages/memberCard/addMemberCard'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-popup {
		.card-popup-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: calc(774rpx - 678rpx);
			
			.add_icon {
				display: flex;
				align-items: center;
			}
		}

		.card-popup-body {
			height: 678rpx;
			// background-color: rgba(244, 244, 244, 1);
			// overflow: hidden;
			// overflow-y: auto;
			
			.item {
				height: auto;
				margin: 0 48rpx 20rpx;
				border-radius: 20rpx;
				.top-box {
					width: 100%;
					height: 308rpx;
					border-radius: 20rpx;
					background: linear-gradient(90deg, #FF5588 0%, #FF4345 100%);//背景图片未加载时展示的
					background-image: url('https://img.piaohenduo.com/wapiaoLive/memberCard_backgroundIMG.png');
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					padding: 40rpx 30rpx;
					position: relative;
					
					>.text1 {
						>.text1-1 {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(255,240,200,0.8);
							line-height: 28rpx;
						}
						>.text1-2 {
							margin-top: 8rpx;
							font-size: 64rpx;
							font-weight: bold;
							color: #FFF0C8;
							line-height: 64rpx;
						}
					}
					>.text2 {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						>.text2-1 {
							height: 32rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFF0C8;
							line-height: 32rpx;
							>text {
								margin-left: 16rpx;
							}
						}
						>.text2-2 {
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 20rpx;
							background-color: rgba(255,240,200,0.16);
							padding: 8rpx 12rpx;
							
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFF0C8;
							line-height: 24rpx;
							>text {
								margin-left: 8rpx;
							}
						}
					}
					>.card_select {
						position: absolute;
						top: 34rpx;
						right: 30rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;
						>image {
							height: 100%;
							width: 100%;
						}
					}
				}
				.disabled_cause-box {
					padding: 0 30rpx;
					border-radius: 0 0 20rpx 20rpx;
					background: linear-gradient(90deg, rgba(255, 85, 136, 0.7) 0%, rgba(255, 67, 69, 0.7) 100%);
					>.disabled_cause {
						width: 100%;
						border-top: 2rpx dashed rgba(255,255,255,0.2);
						display: flex;
						align-items: center;
						justify-content: flex-start;
						padding-top: 20rpx;
						padding-bottom: 40rpx;
						>image {
							height: 28rpx;
							width: 28rpx;
							margin-right: 8rpx;
						}
						>.disabled_cause_text {
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 24rpx;
						}
					}
				}
			}
			.disabled {
				>.top-box {
					opacity: 0.7;
					padding-bottom: 20rpx;
					border-radius: 20rpx 20rpx 0 0;
					background: linear-gradient(90deg, #FF5588 0%, #FF4345 100%);
					>.text1 {
						>.text1-1 {
							color: rgba(255,240,200,0.56);
						}
						>.text1-2 {
							color: rgba(255, 240, 200, 0.7);
						}
					}
					>.text2 {
						>.text2-1 {
							color: rgba(255, 240, 200, 0.7);
						}
						>.text2-2 {
							color: rgba(255, 240, 200, 0.7);
						}
					}
				}
			}

			.no-card {
				margin: 50rpx auto;
				width: 600rpx;
				height: 450rpx;
				background-image: url(../static/no-card.png);
				background-size: 100% 100%;
			}
		}
	}
	.exchange {
		width: 550rpx;
	
		.exchange-title {
			padding: 24rpx 24rpx 0 0;
			position: relative;
	
			.close-sty {
				position: absolute;
				top: 14rpx;
				right: 16rpx;
			}
		}
	
		.exchange-body {
			padding: 44rpx 30rpx 46rpx 16rpx;
			caret-color: rgba(67, 142, 255, 1);
		}
	
		.exchange-bottom {
			>view {
				display: flex;
				justify-content: center;
				width: 50%;
				padding: 18rpx 0 30rpx 0;
				border-top: 2rpx solid rgba(232, 234, 238, 0.7);
				font-size: 32rpx;
	
				&:last-child {
					border-left: 2rpx solid rgba(232, 234, 238, 0.7);
					color: rgba(67, 142, 255, 1);
				}
			}
		}
	}
</style>
